<template>
	<view class="order">
		<view class="top">
			<view class="left">
				<u-icon name="redo-filled" :size="30" color="rgb(94,94,94)"></u-icon>
				<view class="order-code">申诉单号:{{ handleItem.handleCode }}</view>
				<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
			</view>
		</view>
		<view class="item">
			<view class="content">
				<view class="right-info">申诉状态： {{handleItem.handleState | statusHandleFilter}}</view>
				<view class="right-info">申诉理由： {{handleItem.handleReason}}</view>
				<view class="right-info">处理意见： {{handleItem.reason}}</view>
			</view>
			<view class="right">
				<u-image width="100%" height="200rpx" :src="handleItem.handleImg"></u-image>
			</view>
		</view>
		<view class="bottom">
			<view class="right-info">申诉时间： {{handleItem.createDate}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			handleItem: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		filters: {
			statusHandleFilter(status) {
				const statusMap = {
					'0': '待审批',
					'1': '通过',
					'2': '驳回'
				}
				return statusMap[status]
			}
		},
		data() {
			return {
				title: '申诉记录',
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
			}
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		width: 98%;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
	
		.top {
			display: flex;
			justify-content: space-between;
	
			.left {
				display: flex;
				align-items: center;
	
				.order-code {
					margin: 0 10rpx;
					font-size: 28rpx;
					font-weight: bold;
				}
			}
	
			.customer-name {
				color: $u-type-warning-dark;
			}
		}
	
		.item {
			display: flex;
			margin: 20rpx 0 0;
	
			.content {
				flex: 2;
	
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}
	
				.type {
					margin: 10rpx 0;
					font-size: 28rpx;
					color: $u-tips-color;
				}
	
				.consignee-name {
					margin: 10rpx 0;
					font-size: 28rpx;
					color: $u-tips-color;
				}
	
			}
	
			.right {
				flex: 1.5;
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;
	
				.right-info {
					font-size: 24rpx;
					margin-top: 4rpx;
					margin-bottom: 10rpx;
				}
	
			}
		}
	
		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;
	
			.total-price {
				font-size: 32rpx;
			}
		}
	
		.bottom {
	
			.bottom-uper {
				margin-top: 10rpx;
	
				.delivery-time {
					color: $u-type-error-dark;
					font-size: 24rpx;
					margin-bottom: 5rpx;
				}
	
				.remarks {
					margin-top: 5rpx;
					color: $u-type-info-dark;
					font-size: 24rpx;
				}
			}
	
			.bottom-lower {
				display: flex;
				margin-top: 30rpx;
				padding: 0 10rpx;
				justify-content: space-around;
				align-items: center;
	
				.btn {
					line-height: 52rpx;
					width: 160rpx;
					border-radius: 26rpx;
					border: 2rpx solid $u-border-color;
					font-size: 26rpx;
					text-align: center;
					color: $u-type-info-dark;
				}
	
				.call-order {
					color: $u-type-warning-dark;
					border-color: $u-type-warning-dark;
				}
			}
	
		}
	}
</style>
